<template>
  <div id="AsnDetailList">
    <v-tableTitle :title="$t('wave.filterinfo')"
                  :btnConfig="btnConfig"
                  :tableSelectData="selectData"
                  @backList="backList"
                  @del="del"
                  @newCreate="newCreate"></v-tableTitle>
    <div class="detail">
      <component :data="{detailData,argument}"
                 :is="currentComponent"></component>
    </div>
  </div>

</template>

<script>
import tableTitle from "commons/TableTitle";
import navMenu from "commons/NavMenu";
import baseMixin from "@/mixins/BaseMixin";
import config from "../Config";

export default {
  name: "DetailList",
  mixins: [baseMixin, config],
  data() {
    return {
      newFlag: false,
      detailsFlag: false,
      argument: {},
      detailData: {},
      selectData: [],
      detailNav: "1",
      componentConfig: [
        {
          name: "detailTable",
          label: "",
          component: () => import("./page/detailTable.vue"),
        },
        {
          name: "tableDetail",
          label: this.$t('common.detail'),
          component: () => import("./page/tableDetail.vue"),
        },
      ],
    };
  },
  computed: {
    btnConfig() {
      if (this.detailNav == 1) {
        return [
          { label: this.$t('common.create'), certigier: !this.btnPermNameList.includes('WM05010104'), invalid: "newCreate" },
          {
            label: this.$t('common.delete'),
            certigier: this.deleteStatus||!this.btnPermNameList.includes('WM05010105'),
            disabled: true,
            invalid: "del",
          },
        ];
      } else {
        return [{ label: this.$t('common.return'), certigier: !this.btnPermNameList.includes('WM05010107'), invalid: "backList" }];
      }
    },
    currentComponent() {
      return this.componentConfig[this.detailNav - 1].component;
    },
  },
  methods: {
    //删除数据
    del(data) {
      let date = new Date();
      data.forEach(async (e, idx) => {
        if (e.serialkey) {
          delete e.disabled;
          e.dateadded = date.getTime();
          let arr = [];
          e.currentPage = 0;
          arr.push(e);
          try {
            let res = await this.$api.post(`/deleteQuerybuilderdetails`, arr);
            
              this.$message.success(res.returnMgr);
              this.$children[1].getTableData(1, {});
            
          } catch (e) {
            this.$message.error(e);
          } finally {
            this.$children[1].$refs.table.delSelectData(arr);
          }
        } else {
          this.$children[1].tableData.forEach((item, index) => {
            if (item.id) {
              if (item.id === e.id) {
                this.$children[1].tableData.splice(index, 1);
              }
            }
          });
          this.$children[1].$refs.table.delSelectData(e, idx);
        }
      });
    },
    //选中的数据
    setSelectData(data) {
      this.selectData = data;
    },
    //返回试图
    backList() {
      this.detailsFlag = false;
      this.detailNav = "1";
    },
    //新建
    async newCreate() {
      let date = new Date();
      this.$children[1].tableData.push({
        id: date.getTime(),
        orderfield: "",
        operator: "",
        firstvalue: "",
        secondvalue: "",
        andor: "AND",
        interactionid: this.$parent.$refs.detail.detailData.interactionid,
      });
      /* this.detailData = {
                 orderfield: "",
                 operator: "",
                 firstvalue: "",
                 secondvalue: "",
                 andor: "AND",
             }
             this.detailsFlag = true;
             this.detailNav = '2'*/
    },
  },
  mounted() {
    ;
    if (Object.keys(this.$store.state.skip).length !== 0) {
      let data = this.$store.state.skip;
      this.argument = data.routeData;
      this.detailData = data.detailList;
      this.detailNav = data.detailListNav;
    } else {
      this.argument = this.$store.state.routeData;
    }
  },
  components: {
    "v-tableTitle": tableTitle,
    "v-navMenu": navMenu,
  },
  watch: {
    selectData(data) {
      if (this.permissionStatus) {
        if (data.length > 0) {
          this.deleteStatus = false;
        } else {
          this.deleteStatus = false;
        }
      }
    },
  },
};
</script>

<style>
</style>
